<template>
	<view class="app">
		<view class="app-container" v-if="visibleH5">
			<view class="tinfied">
				<!-- <image src="../../static/img/tinified/资源%206.png"></image> -->
			</view>
			<view class="action">
				<file-uploader @confirm="confirmEvent"></file-uploader>
				<view class="text-center">仅支持上传{{format}}格式文件</view>
				<view class="text-center text-gray">
					<text class="cuIcon-question"></text>
					使用帮助
				</view>
			</view>
		</view>
		<web-view v-if="visibleMP" :src="loacalUploadSrc" @message="messageEvent"></web-view>
	</view>
</template>

<script>
import fileUploader from './components/xiaoshaoxin-fileUploader/fileUploader.vue';
import {mapMutations, mapGetters} from 'vuex'

import {VUE_APP_BASE_API } from '@/common/tools/config.js'

export default {
	components: {
		fileUploader
	},
	data() {
		return {
			//是否显示H5文件上传按钮
			visibleH5: false,
			visibleMP: false,
			doc: ['pdf', 'doc', 'docx', 'xls', 'xlsx'],
			img: ['png', 'jpg']
		};
	},
	mounted() {
		//是否显示H5文件上传按钮
		// #ifdef H5
		this.visibleH5 = true
		// #endif
		//是否显示小程序文件上传按钮
		// #ifdef MP
		this.visibleMP = true
		// #endif
	},
	computed: {
		selectedSpec() {
			return getApp().globalData.uploadFileInfo['spec']
		},
		format() {
			const list = this.selectedSpec.type ===0 ? this.doc : this.img;
			return list.join('/');
		},
		loacalUploadSrc() {
			return `${VUE_APP_BASE_API}${this.selectedSpec.type === 0 ? '/upload' : '/upload-img'}.html?token=${uni.getStorageSync('token')}&type_id=${this.selectedSpec.cloud_print_type_id}&base_url=${VUE_APP_BASE_API}`
			// return `${VUE_APP_BASE_API}${this.selectedSpec.type === 0 ? 'upload' : 'upload-img'}.html?token=${uni.getStorageSync('token')}&type_id=${this.selectedSpec.cloud_print_type_id}&base_url=${VUE_APP_BASE_API}`
		}
	},
	methods: {
		clickFileUpload() {},
		confirmEvent(file) {
			//存储文件
			getApp().globalData.uploadFileInfo['path'] = file.upload_file;
			getApp().globalData.uploadFileInfo['page_num'] = file.page_num;
			// 关闭当前页面，跳转到应用内的某个页面
			uni.redirectTo({
				url: '/print-pages/confirm?fileData=' + file
			})
		},
		messageEvent(e) {
			const file = e.detail.data.shift()
			//存储文件类型
			getApp().globalData.uploadFileInfo['path'] = VUE_APP_BASE_API + file.path;
			getApp().globalData.uploadFileInfo['file_name'] = file.file_name;
			getApp().globalData.uploadFileInfo['page_num'] = file.page_num;
		}
	}
};
</script>

<style lang="scss">
.app-container {
	height: 100%;
	position: relative;
	.tinfied {
		display: flex;
		justify-content: center;
		height: 70%;
		align-items: center;
		opacity: 0.5;
	}
	.action {
		bottom: 36px;
		left: 16px;
		right: 16px;
		position: absolute;
		height: 30%;
	}
}
</style>
